<!DOCTYPE html>
<!-- saved from url=(0046)https://www.runoob.com/html/html-tutorial.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>经典软件体系结构</title>
	<link rel="icon" href="./img/swpu.png">

	<meta name="robots" content="max-image-preview:large">
	<link rel="canonical" href="http://www.runoob.com/html/html-tutorial.html">
	<meta name="keywords" content="HTML 教程,html">
	<meta name="description" content="HTML 教程- (HTML5 标准)    超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 在本教程中，您将学习如何使用 HTML 来创建站点。 HTML 很容易学习！相信您能很快学会它！   HTML 实例 本教程包含了数百个 HTML 实例。 使用本站的编辑器，..">

	<link rel="shortcut icon" src="./img/oo.png">
	<link rel="stylesheet" href="./HTML 教程 _ 菜鸟教程_files/style.css" type="text/css" media="all">
	<link rel="stylesheet" href="./HTML 教程 _ 菜鸟教程_files/font-awesome.min.css" media="all">
	<!--[if gte IE 9]><!-->

	<!--<![endif]-->
	<!--[if lt IE 9]>
	<script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	<![endif]-->
	<!--  <link rel="apple-touch-icon" href="https://static.runoob.com/images/icon/mobile-icon.png">-->
	<meta name="apple-mobile-web-app-title" content="菜鸟教程">
	<meta http-equiv="origin-trial" content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ=="><meta http-equiv="origin-trial" content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ=="><meta http-equiv="origin-trial" content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ=="><meta http-equiv="origin-trial" content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ=="><meta http-equiv="origin-trial" content="As0hBNJ8h++fNYlkq8cTye2qDLyom8NddByiVytXGGD0YVE+2CEuTCpqXMDxdhOMILKoaiaYifwEvCRlJ/9GcQ8AAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ=="><meta http-equiv="origin-trial" content="AgRYsXo24ypxC89CJanC+JgEmraCCBebKl8ZmG7Tj5oJNx0cmH0NtNRZs3NB5ubhpbX/bIt7l2zJOSyO64NGmwMAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3MTk1MzI3OTksImlzU3ViZG9tYWluIjp0cnVlfQ=="><link rel="stylesheet" type="text/css" href="./HTML 教程 _ 菜鸟教程_files/atelier-savanna-light.min.css"><script async="" src="https://fundingchoicesmessages.google.com/i/ca-pub-5751451760833794?ers=2"></script><meta http-equiv="origin-trial" content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9"></head>
<body style="">


<!--  内容  -->
<div class="container main" style="height: auto !important;">
	<!-- 中间 -->
	<div class="row" style="height: auto !important;">

		<div class="runoob-col-md2">
			<div class="left-column site-fix" style="width: 222px;">
				<div class="tab" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
					<span>经典软件体系结构</span>
					<a data-cate="1" href="javascript:void(0);" title="夜间模式" id="moon"></a>
					<a data-cate="1" style="display:none;" href="javascript:void(0);" title="日间模式" id="sun"><i class="fa fa-sun-o" aria-hidden="true" style="line-height: 28px;font-size: 1.2em;margin: 2px 4px 0;line-height: 28px;
}"></i></a>

				</div>
				<div class="sidebar-box gallery-list">
					<div class="design" id="leftcolumn">
						<a target="_top" data-p="par" href="index.html">
							主程序-子程序软件体系结构			</a>
						<a target="_top" data-p="par"  href="oo.html">
							面向对象软件体系结构			</a>
						<a target="_top" data-p="par"  style="background-color: rgb(150, 185, 125); font-weight: bold; color: rgb(255, 255, 255);">
							事件系统软件体系结构			</a>
						<a target="_top" data-p="par" href="pipe.html">
							管道-过滤软件体系结构			</a>

					</div>
				</div>
			</div>
		</div>	<div class="col middle-column" style="height: auto !important;">


		<div class="article" style="height: auto !important;">


			<div class="article-heading-ad" style="display: block;">
				<script async="" src="./HTML 教程 _ 菜鸟教程_files/f(8).txt" crossorigin="anonymous" data-checked-head="true"></script>
				<!-- 728*90 固定 -->

			</div>
			<div class="article-body">

				<div class="article-intro" id="content">

					<h1> <span class="color_h1">事件系统软件体系结构</span></h1>
					<div class="tutintro">
						<!--	这个img是html图标位置-->
						<img decoding="async" src="./img/evenr.png">
						<div class="tutintro">

							<p>事件系统软件体系结构是一种基于事件驱动的架构模式。
							<p>在这种模式下，系统中的组件（也称为事件源）产生事件，并将其发布到事件系统中。其他组件（也称为事件处理器）可以订阅这些事件，并在事件发生时执行相应的操作。</p>

						</div>

						<blockquote>  <p>
							<strong>注意：</strong>事件系统软件体系结构具有松散耦合和高度可扩展性的特点。事件源和事件处理器之间通过事件进行通信，彼此之间不需要直接的依赖关系。这使得系统更具灵活性，可以轻松地添加或删除事件源和事件处理器，而不会影响系统的其他部分。
						</p>
						</blockquote>
					<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
					<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>


					<div class="example">
						<div class="example" id="input-output" >


							<h2 class="example">KWIC(Key Word In Context)，Parnas (1972)索引系统</h2>

							<div class="search-input"  >
								<input class="placeholder" id="s" name="s" v-model="inputText"
									   placeholder="请输入你的 索引" onclick="sendGetRequest()" autocomplete="off" style="height: 44px;">
							</div>
							<br>
							<button  @click="sendGetRequest" class="tryitbtn" rel="noopener noreferrer">尝试一下 »</button>
							<br><div class="example_code">
<span class="hl-brackets">
  <label for="output">输出：</label>
  <textarea id="output" rows="4" cols="50">{{ outputText }}</textarea>

</span>

					<script>
						new Vue({
							el: '#input-output',
							data: {
								inputText: '',
								outputText: ''
							},
							methods: {
								sendGetRequest() {
									// 发送 GET 请求
									// 这里可以使用你喜欢的方式发送 GET 请求，比如使用 Axios、fetch 等
									// 下面是一个示例使用 Axios 发送 GET 请求的代码
									axios.get('/main-program', {
										params: {
											input: this.inputText
										}
									})
											.then(response => {
												// 请求成功后更新 outputText
												this.outputText = response.data;
												console.log(response);
											})
											.catch(error => {
												// 请求失败时处理错误
												console.error(error);
											});
								}
							}
						});
					</script>
					<script type="text/javascript">
						function isBlank(str) {
							return (!str || /^\s*$/.test(str));
						}
						function kFormatter(num) {
							// return num;
							return Math.abs(num) > 999 ? Math.sign(num)*((Math.abs(num)/1000).toFixed(1)) + 'k' : Math.sign(num)*Math.abs(num)
						}

					</script>

					<link rel="stylesheet" href="./HTML 教程 _ 菜鸟教程_files/qa.css">
					<link rel="stylesheet" type="text/css" href="./HTML 教程 _ 菜鸟教程_files/simditor.min.css">
					<div class="sidebar-box ">


						<style>
							.responsive_ad1 { display:none; }
							@media(min-width: 800px) { .responsive_ad1 {  display:block;margin:0 auto;} }
						</style>
						<div id="ad-336280">

							<script async="" src="./HTML 教程 _ 菜鸟教程_files/f(8).txt" crossorigin="anonymous" data-checked-head="true"></script>
							<!-- 移动版 自动调整 -->

							<!-- 右边栏 -->
							<div class="fivecol last right-column" style="height: auto !important;">

								<style>
									.sidebar-tree .double-li {
										width:300px;
									}
									.sidebar-tree .double-li li {
										width: 44%;
										line-height: 1.5em;
										border-bottom: 1px solid #ccc;
										float: left;
										display: inline;
									}
								</style>

								<br>


								<script>
									var aid = 1;
									function coll() {
										$.post( '/wp-content/themes/runoob/option/user/userinfo.php', {aid:aid, action:"collarticle", opt:'add'},function( data ) {
											if(data.error==0) {
												$("#content").find("h1:first").find("a").attr("href","javascript:void(0);");
												$("#content").find("h1:first").find("img").attr("src","http://www.runoob.com/wp-content/themes/runoob/assets/img/coll2.png").css({width:32+"px",height:32+"px"});
											}
											alert(data.msg);
										},'json');
									}
								</script>


								<script async="" src="./HTML 教程 _ 菜鸟教程_files/js(1)"></script>
								<script>
									window.dataLayer = window.dataLayer || [];
									function gtag(){dataLayer.push(arguments);}
									gtag('js', new Date());

									gtag('config', 'UA-84264393-2');
								</script>
								<script>
									var _hmt = _hmt || [];
									(function() {
										var hm = document.createElement("script");
										hm.src = "https://hm.baidu.com/hm.js?3eec0b7da6548cf07db3bc477ea905ee";
										var s = document.getElementsByTagName("script")[0];
										s.parentNode.insertBefore(hm, s);
									})();
								</script>
							</div>

							<script>
								window.jsui={
									www: 'https://www.runoob.com',
									uri: 'https://www.runoob.com/wp-content/themes/runoob'
								};
							</script>
